<template>
  <div class="message-container" :class="classNames.join(' ')">
    <div class="stance">
      <u-avatar icon="star-fill" fontSize="22" v-if="role === 'BOT'"></u-avatar>
    </div>
    <div class="content">
      <div class="message" v-if="isObject(data)">
        <div>
          {{item.fileUrl}}
          <!-- <u-image v-for="item,index in data.fileList" :key="index" :show-loading="true" :src="item.fileUrl" ></u-image> -->
        </div>
        <div>{{ data.context }}</div>
      </div>

      <div class="message" v-if="isArray(data)">
        {{ data[0].context }}
        <div class="align-items_center justify_between mt_sm">
          <div></div>
          <div class="align-items_center gap_xs">
            <u-button shape="circle" size="small" icon="chat-fill"></u-button>
            <u-button shape="circle" size="small" icon="reload"></u-button>
            <u-button shape="circle" size="small" icon="share-square"></u-button>
          </div>
        </div>
      </div>
    </div>
    <div class="stance">
      <u-avatar
        icon="red-packet-fill"
        fontSize="22"
        v-if="role === 'USER'"
      ></u-avatar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { isArray, isObject } from '@/utils/typeInspector';

export default defineComponent({
  name: 'Message',
  props: {
    role: {
      type: String,
      required: true,
    },
    data: {
      type: [Object, Array],
      required: true,
    },
  },
  setup(props) {
    const classNames = [];

    if (props.role === 'USER') {
      classNames.push('reverse');
    }

    return {
      classNames,
      isArray,
      isObject,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.message-container {
  display: flex;
  align-items: flex-start;
  gap: $space;
  & + .message-container {
    margin-top: $space;
  }

  &.reverse {
    // flex-direction: row-reverse;
    .content {
      justify-content: flex-end;
    }

    .message {
      display: inline-block;
      width: unset;
      border-radius: $radius;
      border-top-right-radius: unset;
      background: map-get($theme-colors, primary);
      color: $white-color;
    }
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  .message {
    display: block;
    width: 100%;
    background: $white-color;
    color: $black-color;
    padding: map-get($spaces, sm);
    border-radius: $radius;
    border-top-left-radius: unset;
  }
  .stance {
    width: 40px;
  }
}
</style>
